<template>
  <view class="" ref="silder">
    <slot></slot>
  </view>
</template>

<script>
  export default {
    name: 'Name',
    data() {
      return {
        allLeftNode:[],
        SilderNodeOffsetTop: [],
        SilderNodeOffsetLeft: [],
      }
    },
    props: {

      nodeName: {
        type: String,
        default: 'span'
      },
      direction: {
        type: Boolean,
        default: true, // 默认纵向
      },
      idx: {
        type: Number,
        default: 0,
      },
      value: {
        type: Number,
        defalut: 0,
      },
    },
    watch: {
      idx(val) {
        if (val < 0) {
          this.isIdx = 0
        }
        // if (this.direction) {
        //   this.vertical();
        // } else {
        //   this.crosswise();
        // }
      }
    },
    computed: {

    },
    mounted() {
      this.$nextTick(() => {
        this.init();
      })
    },
    methods: {
      init() {
        // const nodeLeft = this.$refs.silder.$el;
        // const allLeftNode = [...nodeLeft.querySelectorAll(this.nodeName)]
        // this.allLeftNode = allLeftNode;
        // //每块距离顶部
        // let SilderNodeOffsetTop = [];
        // let SilderNodeOffsetLeft = [];
        // //获取左侧每一块的距离顶部的偏移量
        // allLeftNode.forEach(item => {
        //   SilderNodeOffsetTop.push(Number(item.offsetTop))
        //   SilderNodeOffsetLeft.push(Number(item.offsetLeft))
        // })
        // this.SilderNodeOffsetTop = SilderNodeOffsetTop;
        // this.SilderNodeOffsetLeft = SilderNodeOffsetLeft;
      },
      //自动纵向滑动
      vertical() {
        const silderNode = this.$refs.silder.$el;
        //单块高度
        const firstChild = silderNode.firstElementChild.clientHeight;
        //总高度
        const { clientHeight, scrollTop } = silderNode;
        //当前块
        const cardScrollTop = this.SilderNodeOffsetTop[this.idx]

        const topNum = cardScrollTop - scrollTop;
        // 负数表示在上面
        if (topNum <= 0) {
          silderNode.scrollTo({
            top: cardScrollTop,
            left: 0,
            behavior: 'smooth'
          });
        }
        //大于总高度时  表示在下面
        if (topNum > clientHeight - firstChild) {
          silderNode.scrollTo({
            left: 0,
            top: cardScrollTop - clientHeight + (firstChild * 2),
            behavior: 'smooth'
          });
        }
      },
      crosswise() {
        const silderNode = this.$refs.silder.$el;
        const current = this.allLeftNode[this.idx].clientWidth;
        // //单块宽度
        // const firstChild = silderNode.firstElementChild.clientWidth;
        //总高度
        const { clientWidth, scrollLeft } = silderNode;
        //当前块
        const cardScrollLeft = this.SilderNodeOffsetLeft[this.idx]

        const leftNum = cardScrollLeft - scrollLeft;
        // 小于当前块的显示区域时 表示被遮挡
        if (leftNum <= current) {
          silderNode.scrollTo({
            top: 0,
            left:cardScrollLeft -cardScrollLeft ,
            behavior: 'smooth'
          });
        }
        //大于总高度时  表示在下面
        if (leftNum > clientWidth - current) {
          silderNode.scrollTo({
            top: 0,
            left: cardScrollLeft - clientWidth,
            behavior: 'smooth'
          });
        }
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
